<template>
	<view
		class="flex align-center"
		@click="handleRadioClick()"
	>
		<text
			:class="'mar-r-5 iconfont ' + getIcon()"
			:style="{
				color: value === inActiveValue ? inActiveColor : activeColor,
				fontSize: iconSize + 'px',
			}"
		></text>
		
		<text
			:style="{
				color: value === inActiveValue ? inActiveColor : activeColor,
				fontSize: labelSize + 'px',
			}"
		>
			{{ label }}
		</text>
	</view>
</template>

<script>
	export default {
		props: {
			// 组 id
			groudId: {
				type: String | Number,
				default: ''
			},
			
			// 图标类型（radio 圆图标，checkbox 矩形图标）
			iconType: {
				type: String,
				default: 'radio'
			},
			
			// 图标大小
			iconSize: {
				type: Number,
				default: 16
			},
			
			// name（一般是组件的 name，用来区分某一组中元素）
			name: {
				type: String | Number | Boolean,
				default: ''
			},
			
			// 标签内容
			label: {
				type: String,
				default: ''
			},
			
			// 标签字体大小
			labelSize: {
				type: Number,
				default: 14
			},
			
			// 绑定的值
			value: {
				type: String | Number | Boolean,
				default: '',
			},
			
			// 未选中的值
			activeValue: {
				type: String | Number | Boolean,
				default: false
			},
			
			// 选中时的值
			inActiveValue: {
				type: String | Number | Boolean,
				default: true
			},
			
			// 未选中的颜色
			activeColor: {
				type: String,
				default: '#999999'
			},
			
			// 选中时的颜色
			inActiveColor: {
				type: String,
				default: '#3c9cff'
			}
		},
		
		computed: {
			// 获取图标
			getIcon() {
				return () => {
					let iconName = ''
					
					switch (this.iconType) {
						case 'radio':
							// 圆图标
							if (this.value === this.inActiveValue) {
								// 选中图标样式
								iconName = 'icon-icon_radio_xuanzhong'
							} else {
								// 未选中图标样式
								iconName = 'icon-radioweixuanzhong'
							}
							break;
						case 'checkbox':
							// 矩形图标
							if (this.value === this.inActiveValue) {
								// 选中图标样式
								iconName = 'icon-checkbox-checked'
							} else {
								// 未选中图标样式
								iconName = 'icon-checkbox'
							}
							break;
					}
					
					return iconName
				}
			}
		},
		
		data() {
			return {
				
			}
		},
		
		methods: {
			// 点击组件时的回调
			handleRadioClick() {
				this.$emit('handleRadioClick', this.name, this.groudId)
			}
		},
	}
</script>

<style>
</style>